<template>
  <div class="container">
    <el-card>
      <!-- 头部搜索区域 -->
      <el-form
        ref="companysFormRef"
        :model="companysForm"
        inline
        label-position="top"
      >
        <el-row :gutter="30">
          <el-col :span="4">
            <el-form-item label="标签名称:">
              <el-input
                v-model="companysForm.tags"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="省:">
              <el-select
                v-model="companysForm.province"
                placeholder="请选择"
                @change="selectPro(companysForm.province)"
              >
                <el-option
                  v-for="(item, i) in provinces"
                  :key="i"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="市:">
              <el-select v-model="companysForm.citys" placeholder="请选择">
                <el-option v-for="(item, i) in citys" :key="i" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="企业简称:">
              <el-input v-model="companysForm.shortName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="状态:">
              <el-select v-model="companysForm.state" placeholder="请选择">
                <el-option
                  v-for="(item, i) in status"
                  :key="i"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="操作:">
              <el-button type="primary" icon="el-icon-search" @click="searchCom"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 新增用户 -->
      <el-row class="addRow">
        <el-col class="addCol">
          <el-button
            type="primary"
            icon="el-icon-edit"
            class="addUser"
            @click="showAddUser"
            >新增用户</el-button
          >
        </el-col>
      </el-row>

      <!-- 消息提示框 -->
      <el-alert
        :title="`共${counts}条数据`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格区域 -->
      <el-table :data="companysList" style="width: 100%" border>
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="number" label="企业编号" align="center">
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称" align="center">
        </el-table-column>
        <el-table-column prop="tags" label="标签" align="center">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者" align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" align="center">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editUser(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="disableUser(scope.row)"
              >{{ scope.row.state === 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button type="danger" size="mini" @click="deleteUser(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 13, 15, 17]"
        :page-size="queryInfo.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>

    <!-- 新增用户的弹框 -->
    <companys-add ref="children" :editForm="editForm"></companys-add>
    <!-- 编辑用户的弹框 -->
    <companys-add ref="children" :editForm="editForm"></companys-add>
  </div>
</template>

<script>
import { list } from "@/api/hmmm/companys"; // 引入获取企业管理列表的函数
import { provinces, citys } from "@/api/hmmm/citys"; // 引入城市
import companysAdd from "../components/companys-add"; // 引入添加用户的组件
import { status } from "../../api/hmmm/constants"; // 引入状态
import { remove, disabled } from "@/api/hmmm/companys"; // 引入禁用 删除的请求函数
import { parseTimeByString } from "@/filters/index"; // 引入事件过滤器
export default {
  components: { companysAdd },
  data() {
    return {
      // 获取企业管理列表的参数
      queryInfo: {
        page: 1, // 当前页数
        pagesize: 10, // 页码数
      },
      // 企业管理列表数据
      companysList: [],
      counts: 0,

      // 搜索功能的表单内容
      companysForm: {
        tags: "", // 标签名
        shortName: "", // 企业简称
        province: "", // 省
        citys: "", // 市
        state: "", // 状态
      },

      // 省级联选择器的数据
      provinces: [], // 省
      citys: [], // 市

      // 选中状态的下拉选择框
      status,

      // 编辑用户的表单
      editForm: {},
    };
  },
  mounted() {
    this.getCompanysList();
    this.getProvinces();
  },
  methods: {
    // 获取企业管理列表数据
    async getCompanysList() {
      const res = await list(this.queryInfo);
      if (res.status !== 200) return;
      // 获取成功 把数据赋值给data中
      this.companysList = res.data.items;
      this.counts = res.data.counts;
    },

    // 点击搜索的按钮 发起搜索的请求
    async searchCom() {
      const { data: res } = await list(this.companysForm);
      // 获取成功 把数据赋值给data
      this.companysList = res.items;
      this.counts = res.counts;
    },

    // 分页功能
    // 页码数发生变化时的事件
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getCompanysList();
    },
    // 当前页数发生变化的事件
    handleCurrentChange(val) {
      this.queryInfo.page = val;
      this.getCompanysList();
    },

    // 获取省的数据
    async getProvinces() {
      this.provinces = await provinces();
    },
    // 当选中一个省市的时候 渲染这个省的下级区域
    selectPro(val) {
      this.getCitys(val);
    },
    // 获取市的数据
    async getCitys(val) {
      this.citys = await citys(val);
      // 当选中省份 默认第一个城市被选中
      this.companysForm.citys = this.citys[0];
    },

    // 点击新增用户 显示弹框
    showAddUser() {
      this.$refs.children.open();
      this.$refs.children.titleState = "add";
      this.$refs.children.isShow = true;
    },

    // 点击编辑用户 显示弹框
    editUser(row) {
      this.$refs.children.open();
      this.$refs.children.titleState = "edit";
      this.$refs.children.isShow = false;
      if (row.isFamous === 0) {
        row.isFamous = false;
      } else {
        row.isFamous = true;
      }
      this.editForm = row;
    },

    // 点击禁用 发起请求修改后台state数据
    async disableUser(row) {
      console.log(row);
      const confirmResult = await this.$confirm(
        "已成功启用, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("已取消操作");

      // 确定禁用的话 发起请求
      const res = await disabled(row);
      if (res.status !== 200)
        return this.$message.error("禁用失败，请稍后再试");

      this.getCompanysList();
      this.$message.success("已成功禁用");
    },

    // 点击删除 发起请求删除后台的数据
    async deleteUser(row) {
      console.log(row);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("已取消删除");
      // 确定删除 发起删除请求
      const res = await remove(row);
      if (res.status !== 200)
        return this.$message.error("删除失败，请稍后再试");

      this.getCompanysList();
      this.$message.success("已成功删除该用户");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-width: 1366px;
  .el-card {
    margin: 20px;
    .addRow {
      height: 50px;
      .addCol {
        position: relative;
        .addUser {
          position: absolute;
          right: 0;
        }
      }
    }
    .el-alert,
    .el-table {
      margin-bottom: 10px;
    }
  }
  /deep/ .el-dialog__body {
    margin-right: 200px;
  }
}
